<template>
  <div class="css-box" :class="isWookmarkLoad?'wookmarkLoad':'flex-row-stretch-between-wrap'">
    <!-- <div class="css">
      <p name>此页全局样式<span class="lookCode">查看代码</span></p>
      <div class="flex-row-start-between">
        <div class="flex-row-center">
          <div class="margin10">
            <p>是否开启粘性定位</p>
            <el-switch
              @change="setPositionSticky"
              style="display: block"
              v-model="isPositionSticky"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
          <div class="margin10">
            <p>是否开启瀑布流布局</p>
            <el-switch
              style="display: block"
              v-model="isWookmarkLoad"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
        </div>
        <div class="describe">
          <li>全局样式</li>
          <ul>
            <li>粘性定位：对需要开启的元素使用'position:sticky;'属性，'top'可用来指定定位开始位置</li>
          </ul>
        </div>
      </div>
    </div> -->

    <cssDiv>
      <template v-slot:pName>
        此页全局样式
      </template>
      <!-- template -->
      <template v-slot:main>
        <div class="flex-row-center">
          <div class="margin10">
            <p>是否开启粘性定位</p>
            <el-switch
              @change="setPositionSticky"
              style="display: block"
              v-model="isPositionSticky"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
          <div class="margin10">
            <p>是否开启瀑布流布局</p>
            <el-switch
              style="display: block"
              v-model="isWookmarkLoad"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
          <div class="margin10">
            <p>是否通过属性隐藏除此以外所有div</p>
            <el-switch
              style="display: block"
              v-model="isOverflow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </div>
        </div>
      </template>
      <template v-slot:describeTitle>
        全局样式
      </template>
      <li>粘性定位：对需要开启的元素使用'position:sticky;'属性，'top'可用来指定定位开始位置</li>
      <template v-slot:prism-editor>
        <prism-editor
          class="my-editor height-300"
          v-model="code"
          aria-disabled
          :highlight="highlighter"
          :line-numbers="lineNumbers"
          :readonly="readonlyType"
        ></prism-editor>
      </template>
    </cssDiv>
 
    <!-- css1 -->
    <div class="css css1" :overflow="isOverflow?true:false">
      <p name>表单聚焦以及指定样式<span class="lookCode" @click="setlookCode('css1')">查看代码</span></p>
      <div class="flex-row-center">
        <div class="main">
          <div class="form-block">
            <label class="label">
              <span>账号</span>
              <input type="text" ref="input1" class="txt"></input>
            </label>
          </div>
          <div class="form-block">
            <label class="label">
              <span>密码</span>
              <!-- 表单必填非必填css3样式 -->
              <input required type="password" class="txt"></input>
            </label>
          </div>
          <div class="form-block">
            <label class="label">
              <span>验证码</span>
              <!-- 表单必填非必填css3样式 -->
              <input required type="password" class="txt"></input>
            </label>
          </div>
        </div>
        <div class="describe">
          <li>使用了css3属性</li>
          <ul>
            <li>1，:focus-within(伪类)</li>
            <li>效果: 当input元素聚焦时，让父元素背景也聚集</li>
            <li>2，:has(element)元素选择器</li>
            <li>效果: 查找选中的元素，添加样式</li>
          </ul>
        </div>
      </div>
      <prism-editor
          class="my-editor height-300"
          v-model="code"
          aria-disabled
          :highlight="highlighter"
          :line-numbers="lineNumbers"
          :readonly="readonlyType"
        ></prism-editor>
    </div>

    <!-- css2 -->
    <div class="css css2" :overflow="isOverflow?true:false">
      <p name>首字母大写以及鼠标选中样式</p>
      <div class="flex-row-center">
        <div class="main">
          <!-- 生成乱数假文 lorem -->
          <p class="text">
            首字母大写dolor sit amet consectetur adipisicing elit. Amet cum, optio iste unde, quam hic quod, quidem dolore eaque possimus ut incidunt inventore dignissimos veritatis? Itaque optio alias ipsum minimalorem ipsum dolor sit amet consectetur adipisicing elit. Amet cum, optio iste unde, quam hic quod, quidem dolore eaque possimus ut incidunt inventore dignissimos veritatis? Itaque optio alias ipsum minima..
          </p>
        </div>
        <div class="describe">
          <li>使用了css3属性</li>
          <ul>
            <li>1，::first-letter(伪元素)</li>
            <li>效果: 选中第一个文本添加样式</li>
            <li>2，::selection(伪元素)</li>
            <li>效果: 控制鼠标左键选中文本样式</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- css3 -->
    <div class="css css3" :overflow="isOverflow?true:false">
      <p name>背景动画</p>
      <div class="flex-row-center">
        <div class="main flex-row-center">
          <div class="mainBackground div1"></div>
          <div class="mainBackground div2"></div>
          <div class="mainBackground div3"></div>
        </div>
        <div class="describe">
          <li>使用css3 的 Houdini(api)：可以使开发者参与到游览器的渲染</li>
          <ul>
            <li>1，@property --xxx</li>
            <li>2，参数：syntax（必填），inherits（非必填），initial-value（必填）</li>
            <li>3，参数解析：属性接收值得类型，是否可被继承，默认的值</li>
            <li>4，此效果使用：syntax: <\angle>；inherits: false；initial-value: 0deg;</li>
            <li>5，第三个使用‘background: conic-gradient’来进行背景渐变样式填充，渐变的颜色变换围绕一个中心点旋转（而不是从中心辐射）</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- css4 -->
    <div class="css css4" :overflow="isOverflow?true:false">
      <p name>图片滤镜</p>
      <div class="flex-row-stretch">
        <div class="main">
          <p>效果1</p>
          <div class="demo1">
            <img class="demo1Img" ref="imgFilterHueRotate" src="../../image/monster.png" alt="">
          </div>
          <p>效果2</p>
          <div class="demo2">
            <div class="card">
              <p>电话：12345</p>
              <p>日期：12345</p>
              <p>卡号：12345</p>
            </div>
          </div>
        </div>
        <div class="describe">
          <li>使用css3：filter属性</li>
          <ul>
            <li>1：drop-shadow，根据像素点添加阴影</li>
            <li>2：hue-rotate（色相旋转），用法hue-rotate(0deg):角度</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- css5 -->
    <div class="css css5" :overflow="isOverflow?true:false">
      <p name>图片裁剪：旋转效果</p>
      <div class="flex-row-center">
        <div class="main">
          <div class="demo">
            <img class="demo1Img" ref="imgCliPathPolygon" src="../../image/monster.png" alt="">
          </div>
        </div>
        <div class="describe">
          <li>使用css3的属性</li>
          <ul>
            <li>1：clip-path（polygon：多边形）属性，裁剪图片</li>
            <li>2：鼠标移入前：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</li>
            <li>3：鼠标移入后：clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);</li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- css6 -->
    <div class="css css6" :overflow="isOverflow?true:false">
      <p name>图片裁剪：睁眼效果</p>
      <div class="flex-row-center">
        <div class="main">
          <div class="demo">
            <img class="demo1Img" ref="imgCliPathPolygon2" src="../../image/monster.png" alt="">
          </div>
        </div>
        <div class="describe">
          <li>使用css3的属性</li>
          <ul>
            <li>1：clip-path（ellipse：椭圆型）属性，裁剪图片</li>
            <li>2：鼠标移入前：clip-path: ellipse(49% 2% at 50% 50%);</li>
            <li>3：鼠标移入后：配合animation动画</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- css7 -->
    <div class="css css7" :overflow="isOverflow?true:false">
      <p name>图片裁剪：右滑效果</p>
      <div class="flex-row-center">
        <div class="main">
          <div class="demo">
            <img class="demo1Img demoImg" src="../../assets/image/img1.jpg" alt="">
            <img class="demo2Img demoImg" src="../../assets/image/img2.jpg" alt="">
          </div>
        </div>
        <div class="describe">
          <li>使用css3的属性</li>
          <ul>
            <li>1：clip-path（polygon：多边形）属性，裁剪图片</li>
            <li>2：鼠标移入前：clip-path: polygon(-30% 0%, -30% 0%, -30% 50%, -30% 100%, -30% 100%);</li>
            <li>3：鼠标移入后：clip-path: polygon(0% 0%, 100% 0%, 130% 50%, 100% 100%, 0% 100%);</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- css8 -->
    <div class="css css8" :overflow="isOverflow?true:false">
      <p name>充电动画</p>
      <div class="flex-row-center">
        <div class="main">
          <div class="circleContainer"></div>
          <ul ref="circleContainerUl" class="circleContainerUl">
            <!-- <li class="circleContainerLi" v-for="index in 40"></li> -->
          </ul>
        </div>
        <div class="describe">
          <li>使用css3的属性</li>
          <ul>
            <!-- <li>1：clip-path（polygon：多边形）属性，裁剪图片</li>
            <li>2：鼠标移入前：clip-path: polygon(-30% 0%, -30% 0%, -30% 50%, -30% 100%, -30% 100%);</li>
            <li>3：鼠标移入后：clip-path: polygon(0% 0%, 100% 0%, 130% 50%, 100% 100%, 0% 100%);</li> -->
          </ul>
        </div>
      </div>
    </div>

    <!-- css9 -->
    <div class="css css9" :overflow="isOverflow?true:false">
      <p name>粘性定位</p>
      <div class="flex-row-center">
        <div class="main">
          <dl>
            <dt>a</dt>
            <dd v-for="item in 50">aaa</dd>
          </dl>
        </div>
        <div class="describe">
          <li>使用css3的属性</li>
          <ul>
            <!-- <li>1：clip-path（polygon：多边形）属性，裁剪图片</li>
            <li>2：鼠标移入前：clip-path: polygon(-30% 0%, -30% 0%, -30% 50%, -30% 100%, -30% 100%);</li>
            <li>3：鼠标移入后：clip-path: polygon(0% 0%, 100% 0%, 130% 50%, 100% 100%, 0% 100%);</li> -->
          </ul>
        </div>
      </div>
    </div>

    <!-- css10 -->
    <div class="css css10">
      <p name>粘性定位</p>
      <div class="flex-row-center">
        <div class="main">
          <div class="encircle">a</div>
          <div class="encircle">b</div>
          <div class="encircle">c</div>
          <div class="encircle">d</div>
          <div class="encircle">e</div>
          <!-- <div class="encircle">f</div> -->

        </div>
        <!-- <div class="describe">
          <li>使用css3的属性</li>
          <ul>
          </ul>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
/* 代码编辑 */
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere

// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

import { demo1 } from './jsDome/demo1'
import cssDiv from './components/cssDiv.vue'

export default {
  name: "css3",
  components: {cssDiv, PrismEditor},
  data(){
    return{
      isShow: true,
      isPositionSticky: false,
      isWookmarkLoad: false,
      isOverflow: true,
      islookCode: false,
      code: demo1,
      lineNumbers: true, // true 显示行号   false 不显示行号
      readonlyType: false, //true不可编辑   false 可编辑
    }
  },
  mounted() {
    this.inputFocus();
    this.initCircleContainerLi()
  },
  methods: {
    highlighter(code) {
      return highlight(code, languages.js); //returns html
    },
    setPositionSticky() {
      let cssDom = document.getElementsByClassName('css')
      for(let i = 0; i < cssDom.length; i++){
        if(this.isPositionSticky){
          cssDom[i].style.position = 'sticky';
          cssDom[i].style.top = '20px';
        }else{
          cssDom[i].style.position = null
        }
      }
    },
    inputFocus() {
      this.$refs.input1.focus();
      // let img2 = this.$refs.imgCliPathPolygon
      // let timerId = setInterval(()=>{
      //   if(this.isShow){
      //     img2.style.clipPath = 'polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%)';
      //     this.isShow = false
      //     return
      //   }else{
      //     img2.style.clipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
      //     this.isShow = true
      //   }
      // }, 3000)
    },
    initCircleContainerLi(){
      let Vnode = document.createDocumentFragment()
      // for(let i = 0; i < 50; i++){
      //   let liWidth = (Math.random() * 50).toFixed(0)
      //   if(liWidth == 0){
      //     liWidth = (Math.random() * 50).toFixed(0)
      //   }
      //   let liEl = document.createElement('li')
      //   // liEl.style.display = 'inline-block';
      //   liEl.style.width = `${liWidth}px`;
      //   liEl.style.height = `${liWidth}px`;
      //   // console.log(liEl.classList)
      //   liEl.classList.add('circleContainerLi')
      //   Vnode.appendChild(liEl)
      // }
      // this.$refs.circleContainerUl.appendChild(Vnode)
    },
    setlookCode(elClassName){
      this.islookCode = !this.islookCode
      let el = document.getElementsByClassName(elClassName)[0]
      let lookCode = el.getElementsByClassName('my-editor')[0]
      if(this.islookCode){
        lookCode.classList.add('lookCodeTrue')
        return;
      }
      lookCode.classList.remove('lookCodeTrue')
    }
  },
};
</script>

<style lang="scss" scoped>
@import './css/root.scss';
@import './css/animation.scss';
@import './css/index.scss';
@import './css/comm.scss';
@import './css/scrollbar.scss';

.css-box {
  width: 100%;
  padding:0px 10px;
}

.wookmarkLoad{
  column-count: 2; //多列的列数
  column-gap: 10px;//列间距
  .css{
    break-inside: avoid;
    width: 99%;
  }
}

.lookCodeTrue{
  height: 300px;
}
</style>